<!--
 * @Author: 梁青春
 * @Date: 2022-04-24 10:34:56
 * @LastEditTime: 2022-04-24 18:02:33
 * @LastEditors: 梁青春
-->
<template>
    <nav class="main-nav">
        <div class="left-nav">
            <div class="nav-title">vue3模板</div>
            <div class="collapse-sidebar" @click="collapseSidebar">
                <el-icon :size="26">
                    <expand v-if="store.state.isCollapse"/>
                    <fold v-else />
                </el-icon>
            </div>
        </div>
        <div class="right-nav">
            <div class="settheme" @click="switchTheme">
                <el-icon :size="26">
                    <component  :is="isIcon" />
                </el-icon>
            </div>
            <div class="setFontSize">
                <el-dropdown>
                    <span class="dropdown-link"><el-icon :size="20" class="el-icon--right"><operation/></el-icon>字体</span>                    
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="changeFontSize(0)">小</el-dropdown-item>
                            <el-dropdown-item @click="changeFontSize(1)">中</el-dropdown-item>
                            <el-dropdown-item @click="changeFontSize(2)">大</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>        
    </nav>
</template>

<script lang='ts' setup>
import themes from '@/utils/themes'
import {colorMix} from "@/utils"
import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
    const store = useStore()
    let isIcon = ref('sunrise')

    const switchTheme = () => {
        const type = store.state.theme === 'dark'? 'light' : 'dark'
        isIcon.value = store.state.theme === 'dark'? 'sunrise' : 'sunny'
        store.commit('updateTheme', type)
        const colorObj = themes[type]
        // 获取基本色色阶
        // colorMix是一个函数
        for (let i = 1; i < 10; i += 1) {
            colorObj[`--el-color-primary-light-${10 - i}`] = colorMix(colorObj['--el-color-white'], colorObj['--el-color-primary'], i * 0.1)
        }

        // 设置css 变量
        Object.keys(colorObj).map(item => {
            document.documentElement.style.setProperty(item, colorObj[item])
        })

    }

    const changeFontSize = (size) => {
      window.document.documentElement.setAttribute('data-size', size)
    }

    const collapseSidebar= () => {
        store.commit('updateIsCollapse', !store.state.isCollapse)
    }
</script>
<style scoped lang='scss'>
.main-nav {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .left-nav {
    flex: 1;
    display: flex;
    color: var(--el-text-color-primary);
    .nav-title {
        @include add-size($font_size);
        color: var(--el-text-color-primary)
    }
    .collapse-sidebar {

    }
  }
  .right-nav {
    width: 200px;
    display: flex;
    justify-content: space-around;
    .settheme {
        height: 26px;
        width: 32px;
        display: flex;
        align-items: center;
        :deep(.el-icon) {
            color: var(--el-text-color-primary)
        }
    }
    .setFontSize {
        height: 26px;
        width: 88px;
        line-height: 26px;
        display: flex;
        align-items: center;
        .dropdown-link {
            cursor: pointer;
            display: flex;
            align-items: center;
        }
    }
  }  
}
</style>